
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/admin.css" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style>
			.items {
				border: 1px solid #FF0000;
				margin-bottom: 20px;
			}
		</style>
	</head>

	<body>
		<div class="wapper">
			<div class="box_l">
				<div class="logo">Director</div>

				<div class="user_info">
					<div class="u_box_l"><img class="user_pic" src="img/user_pic01.jpg" /></div>
					<div class="u_box_r">
						<p class="u_box_uname">hello,jane</p>
						<p>online</p>
					</div>
				</div>
				<div class="search_box">
					<input type="text" class="search" placeholder="Search..." /><input type="button" class="btn_search" />
					<hr class="hr01">
				</div>
				<div class="box_menu">
					<ul class="menus">
						<li>index1</li>
						<li>index2</li>
						<li>index3</li>
						<li>index4</li>
						<li>index5</li>

					</ul>
				</div>
			</div>
			<div class="box_r">
				<div class="box_r_header">
					<div class="header_l"><img class="btn_menu" src="img/icon05.png" /></div>
					<div class="header_r">
						<img class="btn_menu" src="img/icon06.png" />
						<span class="login_user">Jane Doe</span>
						<span></span>
					</div>
				</div>

				<div class="box_plane">
					<div class="box_plane_title">
						<span class="box_plane_title_text">FORM ELEMENTS</span>
					</div>
					<div class="box_plane_content">
						<form>
							<table class="form_table">
								<tr>
									<td>Default</td>
									<td><input class="form_text" type="text" name="" /></td>
								</tr>
								<tr>
									<td>Help text</td>
									<td><input class="form_text" type="text" name="" />
										<p class="form_text_tips">a block of help text that breaks onto a new line and may extend beyond one line</p>
									</td>
								</tr>
								<tr>
									<td>Rounder</td>
									<td><input class="form_text" type="text" name="" /></td>
								</tr>
								<tr>
									<td>Input focus</td>
									<td><input class="form_text" type="text" name="" /></td>
								</tr>
								<tr>
									<td>Disabled</td>
									<td><input class="form_text" type="text" disabled="disabled" name="" /></td>
								</tr>
								<tr>
									<td>Placeholder</td>
									<td><input class="form_text" type="text" name="" /></td>
								</tr>
								<tr>
									<td>Password</td>
									<td><input class="form_text" type="password" name="" /></td>
								</tr>
								<tr>
									<td>Static control</td>
									<td><input class="form_text form_emaile" type="text" name="" /></td>
								</tr>

							</table>

						</form>
						<div style="position: fixed;z-index: 99999;height: 50px;top:0;left: 0;background:black;color: red;display: none;" id="layer">loading...</div>
						<div id="results"></div>
						<button id="getItem">加载数据</button>

					</div>

				</div>

			</div>
		</div>
		<div>

		</div>

	</body>

</html>

<script>
	//$.ajax({})

	//loding

	function getQuery(sUrl, sParams, fnCallback, fnCallbackErr) {

		$.ajax({
			url: sUrl, //请求后台的地址
			data: sParams, //传输的参数 get 字符串   post : object
			type: "get", //请求类型   get    post		
			dataType: "json", //返回值类型		
			cache: false, //缓存			
			success: function(oJson) {
				//渲染页面或其它操作  200
				//1 结束LOADING

				if("function" == typeof(fnCallback)) {
					fnCallback(oJson);
				}
			},
			error: function(oJson) {
				if("function" == typeof(fnCallbackErr)) {
					fnCallbackErr(oJson);
				}
			},
			complete: function() {
				//最后一步执行的操作

			}
		});
	}

	$("#getItem").click(function() {

		$("#layer").show();
		$("#results").html("");

		getQuery("json/shopList.json", "a=10&b=20", function(oJson) {
			$("#layer").hide();
			if(oJson.success == "true") {
				if(oJson.data.length != 0) {
					var htmls = "";
					for(var i = 0; i < oJson.data.length; i++) {
						htmls += "<div class='items'>" +
							"<span>" + oJson.data[i].shopId + "</span>" +
							"<span>" + oJson.data[i].shopTitle + "</span>" +
							"</div>";
					}
					$("#results").html(htmls);

				} else {
					return false;
				}
			} else {
				return false;
			}
		});

		//N秒后执行function，只执行一次
		/*setTimeout(function() {

			
		}, 2000);*/

	});

	//封装   函数
</script>
